<template>
  <view>
    <view>
      <view class="w100 rowsb h-76 fs-28 col000">
        <view class="title mt-20">学院：</view>
        <view class="pickerSty mt-15 mr-20 pl-18 pt-8 pr-18">
          <picker mode="selector" :range="xyRange" @change="onPickerChange">
            <view class="fs-28 w100 rowsb" style="align-items: center;">
              <text :style="{ 'color': xyValue !== -1 ? '#696969' : '#a9a9a9' }"> {{ xyValue !== -1 ? xyRange[xyValue] :
                '查询学院名称' }} </text>
              <uni-icons @click.native.stop="clearIndex" v-if="xyValue >= 0 && xyValue !== -1" type="clear"
                color="#a9a9a9" size="18" />
            </view>
          </picker>
        </view>
      </view>

      <view class="w100 rowsb h-76 fs-28 col000" v-if="xyValue != -1">
        <view class="title mt-20">年级：</view>
        <view class="pickerSty mt-15 mr-20 pl-18 pt-8 pr-18">
          <picker mode="selector" :range="njRange" @change="onNjChange">
            <view class="fs-28 w100 rowsb" style="align-items: center;">
              <text :style="{ 'color': njValue !== -1 ? '#696969' : '#a9a9a9' }"> {{ njValue !== -1 ? njRange[njValue] :
                '查询学院名称' }} </text>
              <uni-icons @click.native.stop="clearNjIndex" v-if="njValue >= 0 && njValue !== -1" type="clear"
                color="#a9a9a9" size="18" />
            </view>
          </picker>
        </view>
      </view>

      <view class="w100 rowsb h-76 fs-28 col000" v-if="njValue != -1">
        <view class="title mt-20">专业：</view>
        <view class="pickerSty mt-15 mr-20 pl-18 pt-8 pr-18">
          <picker mode="selector" :range="zyRange" @change="onZyChange">
            <view class="fs-28 w100 rowsb" style="align-items: center;">
              <text :style="{ 'color': zyValue !== -1 ? '#696969' : '#a9a9a9' }"> {{ zyValue !== -1 ? zyRange[zyValue] :
                '查询学院名称' }} </text>
              <uni-icons @click.native.stop="clearZyIndex" v-if="zyValue >= 0 && zyValue !== -1" type="clear"
                color="#a9a9a9" size="18" />
            </view>
          </picker>
        </view>
      </view>

      <view class="w100 rowsb h-76 fs-28 col000" v-if="zyValue != -1">
        <view class="title mt-20">班级：</view>
        <view class="pickerSty mt-15 mr-20 pl-18 pt-8 pr-18">
          <picker mode="selector" :range="bjRange" @change="onBjChange">
            <view class="fs-28 w100 rowsb" style="align-items: center;">
              <text :style="{ 'color': bjValue !== -1 ? '#696969' : '#a9a9a9' }"> {{ bjValue !== -1 ? bjRange[bjValue] :
                '查询学院名称' }} </text>
              <uni-icons @click.native.stop="clearBjIndex" v-if="bjValue >= 0 && bjValue !== -1" type="clear"
                color="#a9a9a9" size="18" />
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class="w100 rowsb h-76 fs-28 col000">
      <view class="w100 h100 rowsc rowsm">学院</view>
      <view class="w-100 h100 rowsc rowsm">年级</view>
      <view class="w-150 h100 rowsc rowsm" @click="classSort">
        <view>班级</view>
        <view style="transform: rotate(90deg)">
          <uni-icons type="left" :color="bjNameSort === 'asc' ? '#1890ff' : '#a9a9a9'" size="14" />
          <uni-icons type="right" :color="bjNameSort === 'desc' ? '#1890ff' : '#a9a9a9'" size="14" />
        </view>
      </view>
      <view class="w-150 h100 rowsc rowsm" @click="peoSort">
        <view>人数</view>
        <view style="transform: rotate(90deg)">
          <uni-icons type="left" :color="userCountSort === 'asc' ? '#1890ff' : '#a9a9a9'" size="14" />
          <uni-icons type="right" :color="userCountSort === 'desc' ? '#1890ff' : '#a9a9a9'" size="14" />
        </view>
      </view>
      <view class="w-150 h100 rowsc rowsm" @click="progrSort">
        <view>总进度</view>
        <view style="transform: rotate(90deg)">
          <uni-icons type="left" :color="jdCountSort === 'asc' ? '#1890ff' : '#a9a9a9'" size="14" />
          <uni-icons type="right" :color="jdCountSort === 'desc' ? '#1890ff' : '#a9a9a9'" size="14" />
        </view>
      </view>
      <view class="w-80 h100 rowsc rowsm">操作</view>
    </view>
    <view class="w100 rows rowsm h-120 fs-26 col000 tct" v-for="(item, index) in list" :key="index"
      :style="index % 2 == 0 ? 'background-color: #F7F6FA;' : 'background-color: #fff;'" @click="toPath(item)">
      <view class="w100 h100 rowsc rowsm">{{ item.xyName }}</view>
      <view class="w-100 h100 rowsc rowsm">{{ item.njName }}</view>
      <view class="w-150 h100 rowsc rowsm">{{ item.name }}</view>
      <view class="w-150 h100 rowsc rowsm">{{ item.userCount }}</view>
      <!-- <view class="w-100 h100 rowsc rowsm">{{Number((item.wcCount / item.userCount) * 100).toFixed(2) + '%'}}</view> -->
      <view class="w-150 h100 rowsc rowsm">{{ item.jdCount }}%</view>
      <view class="w-80 h100 rowsc rowsm" :class="item.userCount > 0 ? 'active' : 'active1'">查看</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      total: 0,
      limit: {
        pageNum: 1,
        pageSize: 20
      },
      xyValue: -1,
      xyRange: [],
      xyRangeList: [],

      njValue: -1,
      njRange: [],
      njRangeList: [],

      zyValue: -1,
      zyRange: [],
      zyRangeList: [],

      bjValue: -1,
      bjRange: [],
      bjRangeList: [],

      bjNameSort: null,
      userCountSort: null,
      jdCountSort: null,
    };
  },
  onLoad() {
    this.getXy()  // 获取学院
    this.getList()
  },
  // 下拉到底部后加载新数据
  onReachBottom() {
    if (this.list.length < this.total) {
      this.limit.pageNum++;
      this.getList()
    }
  },
  onPullDownRefresh() {
    this.limit.pageNum = 1
    this.getList()
  },
  methods: {
    onPickerChange(e) {
      if (this.xyRange.length == 0) return;
      this.limit.pageNum = 1;
      this.xyValue = e.detail.value;
      this.njValue = -1;
      this.zyValue = -1;
      this.bjValue = -1;
      this.getNj();
      this.getList();
    },
    clearIndex(e) {
      this.limit.pageNum = 1;
      this.xyValue = -1;
      this.njValue = -1;
      this.zyValue = -1;
      this.bjValue = -1;
      this.getList();
    },
    onNjChange(e) {
      if (this.njRange.length == 0) return;
      this.limit.pageNum = 1;
      this.njValue = e.detail.value;
      this.zyValue = -1;
      this.bjValue = -1;
      this.getZy();
      this.getList();
    },
    clearNjIndex(e) {
      this.limit.pageNum = 1;
      this.njValue = -1;
      this.zyValue = -1;
      this.bjValue = -1;
      this.getList();
    },
    onZyChange(e) {
      if (this.zyRange.length == 0) return;
      this.limit.pageNum = 1;
      this.zyValue = e.detail.value;
      this.bjValue = -1;
      this.getBj();
      this.getList();
    },
    clearZyIndex(e) {
      this.limit.pageNum = 1;
      this.zyValue = -1;
      this.bjValue = -1;
      this.getList();
    },
    onBjChange(e) {
      if (this.bjRange.length == 0) return;
      this.limit.pageNum = 1;
      this.bjValue = e.detail.value;
      this.getList();
    },
    clearBjIndex(e) {
      this.limit.pageNum = 1;
      this.bjValue = -1;
      this.getList();
    },
    classSort() {
      this.bjNameSort = !this.bjNameSort ? 'asc' : this.bjNameSort == 'asc' ? 'desc' : null;
      this.userCountSort = null;
      this.jdCountSort = null;
      this.getList();
    },
    peoSort() {
      this.userCountSort = !this.userCountSort ? 'asc' : this.userCountSort == 'asc' ? 'desc' : null;
      this.bjNameSort = null;
      this.jdCountSort = null;
      this.getList();
    },
    progrSort() {
      this.jdCountSort = !this.jdCountSort ? 'asc' : this.jdCountSort == 'asc' ? 'desc' : null;
      this.userCountSort = null;
      this.bjNameSort = null;
      this.getList();
    },
    getXy() {
      this.$tools.axiosFromToken('POST', `project/proxy/listTotal`, {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.xyRangeList = res.rows.map(item => ({ id: item.id, name: item.name }));
        this.xyRange = res.rows.map(item => item.name);
      })
    },
    getNj() {
      this.$tools.axiosFromToken('POST', `project/pronj/listTotal?${this.xyValue != -1 ? 'pId=' + this.xyRangeList[this.xyValue].id : ''}`, {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.njRangeList = res.rows.map(item => ({ id: item.id, name: item.name }));
        this.njRange = res.rows.map(item => item.name);
      })
    },
    getZy() {
      this.$tools.axiosFromToken('POST', `project/prozy/listTotal?${this.njValue != -1 ? 'pId=' + this.njRangeList[this.njValue].id : ''}`, {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.zyRangeList = res.rows.map(item => ({ id: item.id, name: item.name }));
        this.zyRange = res.rows.map(item => item.name);
      })
    },
    getBj() {
      this.$tools.axiosFromToken('POST', `project/probj/listTotal?${this.zyValue != -1 ? 'pId=' + this.zyRangeList[this.zyValue].id : ''}`, {}, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg);
        this.bjRangeList = res.rows.map(item => ({ id: item.id, name: item.name }));
        this.bjRange = res.rows.map(item => item.name);
      })
    },
    toPath(item) {
      if (item.userCount > 0) {
        uni.navigateTo({
          url: '/pagesCopy/index/classDetail?id=' + item.id
        })
      }
    },
    getList() {
      this.$tools.axiosFromToken('POST',
        `prouser/getBjList?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}${this.xyValue != -1 ? '&xyId=' + this.xyRangeList[this.xyValue].id : ''}${this.njValue != -1 ? '&njId=' + this.njRangeList[this.njValue].id : ''}${this.zyValue != -1 ? '&zyId=' + this.zyRangeList[this.zyValue].id : ''}${this.bjValue != -1 ? '&id=' + this.bjRangeList[this.bjValue].id : ''}${this.bjNameSort != null ? '&bjNameSort=' + this.bjNameSort : ''}${this.userCountSort != null ? '&userCountSort=' + this.userCountSort : ''}${this.jdCountSort != null ? '&jdCountSort=' + this.jdCountSort : ''}`,
        {}, '加载中').then(res => {
          if (res.code != 200) return this.$tools.showtt(res.msg)
          this.total = res.total
          if (this.limit.pageNum == 1) {
            this.list = res.rows;
          } else {
            this.list = [...this.list, ...res.rows];
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.active {
  color: #4878FF !important;
}

.active1 {
  color: #8d8d8e !important;
}

.title {
  width: 20%;
  text-align: center;
}

.pickerSty {
  flex: 1;
  border: 1px solid #cccccc;
}
</style>
